<template>
    <Echart :option="option"></Echart>
</template>

<script setup>
import Echart from './echart.vue';
const option = {
    title: {
        text: '近一周访客超时楼栋分布',
        left: '20',
        textStyle: {
            color: 'rgb(81, 91, 231)',
            fontSize: 13,
            fontWeight: 'bold',
        }
    },
    xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        axisLine: {
            lineStyle: {
                color: '#53fde6', // X轴颜色设置为红色
            }
        },
    },
    yAxis: {
        axisLine: {
            lineStyle: {
                color: '#53fde6', // Y轴颜色设置为绿色
            }
        },
        // 如果需要网格线也为虚线，可以添加以下配置
        axisTick: {
            show: false
        },
        splitLine: {
            lineStyle: {
                type: 'dashed' // 设置网格线为虚线
            }
        }
    },
    grid: {
        top: '40px',
        right: '0',
        bottom: '20px',
        left: '25px',
    },
    series: [
        {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
            itemStyle: {
                // 柱状图颜色交叉分布
                color: function (params) {
                    var colorList = ['#53fde6', '#5391fd'];
                    return params.dataIndex % 2 === 0 ? colorList[0] : colorList[1];
                }
            }
        }
    ]
}
</script>

<style scoped lang="scss"></style>